﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resources/js/knife.static.js")
    @Styles.Render("~/Resources/css/home.css")
</head>
<body>
    <div class="indexcontainter">
        <div class="indexhead">
            <img src="~/Resources/images/logo.png" style="width: 40px; height: 40px;">
            <span class="systemname">knife后台管理</span>
            <div class="righthead">
                <div class="firstmenu head_menu" id="TopMenu">
                </div>
                <div class="headop">
                    <div class="headopitem" onclick="LoginOut()">
                        <img src="~/Resources/images/icon_loginout.png" style="width:20px;height:20px" />
                        <a href="#" style="font-size:13px;margin-left:5px;margin-right:5px">退出系统</a>
                    </div>

                </div>
            </div>
        </div>
        <div class="indexcontent">
            <div class="indexcontent_left" id="LeftMenu">
                <nav class="menu" data-ride="menu" style="width: 160px">
                    <ul id="indexTreeMenu" class="tree tree-menu" style="margin:0"></ul>
                </nav>
            </div>
            <div class="indexcontent_right">
                <div class="tabtitlecontainer">
                    <div class="tabmain" id="tabmain"></div>
                    <div class="tabop">
                        <span style="cursor: pointer;" class="icon icon-times" title="关闭所有"></span>
                    </div>
                </div>
                <div class="tabcontentcontainer">
                    <div class="tabcontentcontainer" id="iframecontainer">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var MenuTreeData = [
             {
                 id: "systemuser",
                 name: "系统用户",
                 extra: {
                     ModuleUrl: "system/user/listPage",
                     ModuleIcon: "icon-user",
                 }
             },
            {
                id: "systemconfig",
                name: "系统参数",
                extra: {
                    ModuleUrl: "system/config/listPage",
                    ModuleIcon: "icon-cog",
                }
            },
            {
                id: "systemdatadic",
                name: "数据字典",
                extra: {
                    ModuleUrl: "system/datadic/listPage",
                    ModuleIcon: "icon-book",
                }
            },
             {
                 id: "systemcornjob",
                 name: "定时任务",
                 extra: {
                     ModuleUrl: "system/cornjob/listPage",
                     ModuleIcon: "icon-tasks",
                 }
             },
              {
                  id: "systemattach",
                  name: "附件管理",
                  extra: {
                      ModuleUrl: "system/attach/listPage",
                      ModuleIcon: "icon-file-archive",
                  }
              },


        ];
        var MenuListData = [];
        var MenuTabList = [];
        var LoginOutUrl = RootPath + "system/user/logout";
        $(function () {
            InitHomeMainPage();
            InitPageHeightSetting();
            RenderLeftMenu();
        })

        function InitHomeMainPage() {
            var HomeUrl = "system/home/main";
            var FrameHeight = (document.body.clientHeight - 50 - 40) + 'px';
            var menuid = "mainpage";
            var menu = { "menuid": menuid, "name": "主页", "url": RootPath + HomeUrl }
            //判断TabMenList是已经包含此窗口
            if (MenuTabList.indexOf(menuid) < 0) {
                //增加tab
                var TabHtml = "";
                TabHtml += "<div id='tab_" + menuid + "' class='tabtitle tabactive'>";
                TabHtml += "<span>" + (menu.name.length > 4 ? menu.name.substr(0, 4) + "..." : menu.name) + "</span>";
                TabHtml += "<i id='refresh_" + menuid + "' class='tabrefresh icon icon-refresh'></i>";
                TabHtml += "</div>";
                $("#tabmain").append(TabHtml);
                //增加iframe
                var TabIFrameHtml = "<iframe class='tabiframe' id='frame_" + menuid + "' style='width:100%;border-width:0;vertical-align: bottom;height:" + FrameHeight + "' src='" + menu.url + "'></iframe>";
                $("#iframecontainer").append(TabIFrameHtml);
                MenuTabList.push(menuid);
                MenuListData.push(menu);
            }
            InitTabClick();
            ChangeTab(menuid);
        }

        function InitPageHeightSetting() {
            $("#indexTreeMenu").height(document.body.clientHeight - 50);
        }

        function RenderLeftMenu() {
            var MenuHtml = "";
            for (var i = 0; i < MenuTreeData.length; i++) {
                var MenuItem = MenuTreeData[i];
                MenuHtml += "<li>";

                MenuItemClass = "MenuItem"
                var MenuItemHtml = "<a class='" + MenuItemClass + "' menuid='" + MenuItem.id + "'>" + (MenuItem.extra.ModuleIcon != "" ? "<i class='icon " + MenuItem.extra.ModuleIcon + "'></i>" : "") + MenuItem.name + "</a>";
                MenuListData.push({ "menuid": MenuItem.id, "url": RootPath + MenuItem.extra.ModuleUrl, "name": MenuItem.name });
                MenuHtml += MenuItemHtml;
                MenuHtml += "</li>";

            }
            $("#indexTreeMenu").html("");
            $("#indexTreeMenu").html(MenuHtml);
            $("#LeftMenu").show();
            //重置
            $('#indexTreeMenu').data('zui.tree', null)
            //渲染
            $('#indexTreeMenu').tree();
            //点击同步
            $(".SubMenu").click(function () {
                var parent = $(this).parent()[0];
                if (parent.className.indexOf('open') != -1) {
                    $(parent).removeClass('open');
                } else {
                    $(parent).addClass('open');
                }
            })
            //点击高亮
            $('#indexTreeMenu').on('click', 'a', function () {
                $('#indexTreeMenu li.active').removeClass('active');
                $(this).closest('li').addClass('active');
            });
            //点击菜单右侧增加tab
            var FrameHeight = (document.body.clientHeight - 50 - 40) + 'px';
            $(".MenuItem").click(function () {
                var menuid = $(this).attr("menuid");
                var menu = GetMenuData(menuid);
                if (menu.MenuUrl == '') {
                    OpenAlert('提示', '该菜单未配置模块地址！')
                }
                //判断TabMenList是已经包含此窗口
                if (MenuTabList.indexOf(menuid) < 0) {
                    var MenuUrl = menu.url;
                    //增加tab
                    var TabHtml = "";
                    TabHtml += "<div id='tab_" + menuid + "' class='tabtitle tabactive'>";
                    TabHtml += "<span>" + (menu.name.length > 4 ? menu.name.substr(0, 4) + "..." : menu.name) + "</span>";
                    TabHtml += "<i id='refresh_" + menuid + "' class='tabrefresh icon icon-refresh'></i>";
                    TabHtml += "<i id='delete_" + menuid + "' class='tabdelete icon icon-times'></i>";
                    TabHtml += "</div>";
                    $("#tabmain").append(TabHtml);
                    //增加iframe
                    var TabIFrameHtml = "<iframe class='tabiframe' id='frame_" + menuid + "' style='width:100%;border-width:0;vertical-align: bottom;height:" + FrameHeight + "' src='" + MenuUrl + "'></iframe>";
                    $("#iframecontainer").append(TabIFrameHtml);
                    MenuTabList.push(menuid);
                    //增加tab后滚动（防止超过屏幕tab栏长度后不显示）
                    var tabobj = $("#tabmain");
                    tabobj.scrollLeft(1000)
                }
                InitTabClick();
                ChangeTab(menuid);
            })
        }

        function InitTabClick() {
            //tab 点击事件
            $(".tabtitle").unbind("click").click(function () {
                var menuid = $(this).attr("id").split("_")[1];
                ChangeTab(menuid);
            })
            //删除事件
            $(".tabdelete").unbind("click").click(function () {
                var menuid = $(this).attr("id").split("_")[1];
                var tabclassname = $("#tab_" + menuid).attr('class');
                //删除tab
                $("#tab_" + menuid).remove();
                //删除iframe
                $("#frame_" + menuid).remove();
                //维护MenuTabList
                var activemenuid = "";
                for (var i = 0; i < MenuTabList.length; i++) {
                    if (MenuTabList[i] == menuid) {
                        //如果删除的tab是active的，则不做切换
                        if (tabclassname.indexOf("tabactive") >= 0) {
                            if (i == MenuTabList.length - 1 && i != 0) {
                                //如果删除的是最后一个tab,默认切换到前一个
                                activemenuid = MenuTabList[i - 1];
                            } else {
                                //切换到后一个
                                activemenuid = MenuTabList[i + 1];
                            }
                            ChangeTab(activemenuid)
                        }
                        MenuTabList.splice(i, 1);
                    }
                }
            })
            //刷新事件
            $(".tabrefresh").unbind("click").click(function () {
                var menuid = $(this).attr("id").split("_")[1];
                var menu = GetMenuData(menuid);
                $("#frame_" + menuid).attr("src", menu.url);
            })
            //tab栏滚动事件
            $(".tabmain").each(function (index, element) {
                element.onwheel = function (event) {
                    var table = $("#tabmain");
                    var right = table[0].scrollWidth - $(element).width();
                    //table[0].scrollWidth为div包含滚动部分的全部宽度，$(element).width()为div的宽度，计算可得知滚动部分长度
                    //table.scrollLeft()为div已经滚动了多少，相比较就可以判断div是否滚动完毕
                    if (table.scrollLeft() < right && event.deltaY > 0) {
                        //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）
                        event.preventDefault();
                        var left = (table.scrollLeft() + 100);
                        table.scrollLeft(left)
                    }
                    if (table.scrollLeft() > 0 && event.deltaY < 0) {
                        //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）
                        event.preventDefault();
                        var left = (table.scrollLeft() - 100);
                        table.scrollLeft(left)
                    }
                }
            })
        }

        function ChangeTab(menuid) {
            $(".tabtitle").each(function () {
                var id = $(this).attr("id");
                if (id != "tab_" + menuid) {
                    $(this).removeClass("tabactive");
                } else {
                    $(this).addClass("tabactive");
                }
            })
            $(".tabiframe").each(function () {
                var id = $(this).attr("id");
                if (id != "frame_" + menuid) {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            })
        }

        function RenderSubMenu(SubMenuTreeData) {
            var MenuHtml = "<ul>";
            for (var i = 0; i < SubMenuTreeData.length; i++) {
                MenuHtml += "<li>";
                var MenuItem = SubMenuTreeData[i];
                var MenuItemClass = "SubMenu";
                if (MenuItem.isParent == false && MenuItem.extra.ModuleUrl != "") {
                    MenuItemClass = "MenuItem"
                }
                var MenuItemHtml = "<a class='" + MenuItemClass + "' menuid='" + MenuItem.id + "'>" + (MenuItem.extra.ModuleIcon != "" ? "<i class='icon " + MenuItem.extra.ModuleIcon + "'></i>" : "") + MenuItem.name + "</a>";
                if (MenuItem.isParent) {
                    MenuItemHtml += RenderSubMenu(MenuItem.children);
                } else {
                    MenuListData.push({ "menuid": MenuItem.id, "url": RootPath + MenuItem.extra.ModuleUrl, "name": MenuItem.name });
                }
                MenuHtml += MenuItemHtml;
                MenuHtml += "</li>";
            }
            MenuHtml += "</ul>"
            return MenuHtml;
        }

        function GetMenuData(menuid) {
            var MenuData = {};
            for (var i = 0; i < MenuListData.length; i++) {
                var item = MenuListData[i];
                if (item.menuid == menuid) {
                    MenuData = item;
                    break;
                }
            }
            return MenuData;
        }

        function LoginOut() {
            OpenConfirm('确认退出系统?', function () {
                CloudPost({}, LoginOutUrl, function (res) {
                    if (res.code == 0) {
                        window.top.location.reload();
                    }
                });
            })
        }
    </script>
</body>
</html>
